<template>
    <div class="content">
        <el-container class="warp" direction="vertical">
            <el-header height="auto" style="margin-top: 40px;">
                <!-- Header content -->
                <el-carousel type="card" trigger="click" height="180px">
                    <el-carousel-item v-for="(item, index) in banner" :key="index">
                        <el-image style="height: 100%;width:100%" :src="item" fit="fill"></el-image>

                    </el-carousel-item>
                </el-carousel>
            </el-header>
            <el-container class="content">
                <el-aside class="aside" ref="aside" id="aside" width="250px" style="position: relative;">
                    <!-- Aside content -->
                    <div :class="asideFixed ? 'fixed' : ''" style="height: 800px;width: 100%;background-color: #fff;">
                        <div class="aside-item" v-if="isLogin">
                            <div class="aside-item-label">
                                我关注的社区
                            </div>
                            <div class="joined-list">
                                <router-link :to="{ name: 'Community', query: { id: community.id } }" class="community-item"
                                    :key="community.id" v-for="community in joinedCommunity">
                                    {{ community.name }}
                                </router-link>
                            </div>




                        </div>
                        <div class="aside-item">
                            <div class="aside-item-label">
                                社区分类
                            </div>
                            <div class="category-list">
                                <el-menu class="el-menu-vertical-demo" @select="selectCategory">

                                    <el-menu-item v-for="(cate) in categoryList" :index="cate.id + ''" :key="cate.id">
                                        <!-- <i class="el-icon-setting"></i> -->
                                        <span slot="title">&emsp;{{ cate.name }}</span>
                                    </el-menu-item>

                                </el-menu>
                            </div>
                        </div>
                    </div>
                </el-aside>


                <el-main class="list">
                    <!-- Main content -->
                    <div style="min-height:100vh;border: 1px solid #EBEEF5;background-color: white;">
                        <el-container direction="vertical">
                            <el-header height="">
                                <!-- Header content -->
                                <div class="search-box">
                                    <div class="search-warp">

                                        <el-input style="width: 600px;" v-model="searchName"
                                            prefix-icon="el-icon-search" placeholder="搜索帖子" size="normal" clearable
                                            @change="searchChanged"></el-input>

                                    </div>
                                </div>
                            </el-header>
                            <el-main :loading="tabLoading" height="">
                                <el-empty v-if="postList.length == 0" description="暂无推荐数据"></el-empty>
                                <post-list-card :fatherType="1" v-for="post in postList" :key="post.id"
                                    :postInfo="post"></post-list-card>
                            </el-main>
                            <div class="pagination-warp">
                                <el-pagination v-if="total>0" @current-change="getRecommendPost" :current-page.sync="recommendParams.pageNum"
                                    :page-sizes="[20, 40, 80, 100]" :page-size.sync="recommendParams.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper" :total="total" background>
                                    :pager-count="7">
                                </el-pagination>
                            </div>

                        </el-container>


                    </div>
                </el-main>
            </el-container>


        </el-container>

    </div>
</template>

<script>
import PostListCard from '@/components/PostListCard'
import * as CatAPI from '@/api/category/category';
import * as LoginAPI from '@/api/login';
import * as CommunityAPI from "@/api/community/community";
import * as PostAPI from '@/api/post/post';
export default {
    data() {
        return {
            asideFixed: false,
            categoryList: [],
            isLogin: false,
            joinedCommunity: [],
            searchName: null,
            postList: [],
            recommendParams: {
                pageNum: 1,
                pageSize: 10
            },
            banner: [
                "/img/banner_ny.jpg",
                "/img/banner005.png",
                "/img/banner002.png",
                "/img/banner_ny.jpg",
                "/img/banner_ny.jpg",
            ],
            total: 0,
            tabLoading: true
        }
    },
    components: {
        PostListCard,
    },
    destroyed() {
        // window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        getCategoryList() {
            CatAPI.getCategoryList().then(res => {
                console.log(res.data)
                this.categoryList = res.data
            })
        },
        selectCategory(index, indexPath) {
            this.$router.push({ name: "CommunitySquare", query: { categoryId: index } })
        },
        getIsLogin() {
            LoginAPI.isLogin().then(res => {
                this.isLogin = res.data.isLogin;
            })
        },
        getJoinedCommunity() {
            if (this.isLogin) {
                CommunityAPI.getJoinedCommunity().then(res => {
                    this.joinedCommunity = res.data
                })
            }
        },
        getRecommendPost() {
            this.tabLoading = true;
            PostAPI.getRecommendPost(this.recommendParams).then(res => {
                this.postList = res.data.rows;
                this.total = parseInt(res.data.count);
                this.tabLoading = false;
                console.log(res.data)
            })
        },
        searchChanged(val) {
            console.log(val)
            if (val) {
                this.tabLoading = true;
                PostAPI.searchPost({ title: this.searchName }).then(res => {
                    this.postList = res.data.rows;
                    this.total = res.data.count;
                    this.tabLoading = false;
                    console.log(res.data)
                })
            } else {
                this.getRecommendPost();
            }
        }

    },
    watch: {
        isLogin(newValue, oldValue) {
            this.getJoinedCommunity();
        }
    },
    mounted() {
        this.getCategoryList();
        this.getIsLogin();
        this.getRecommendPost();
    },


}
</script>

<style lang="scss" scoped>
.content {
    width: 1146px;
    margin: auto;
    /* // background-color: pink; */
    position: relative;
    display: flex;
}

.aside {
    padding: 20px 0px 20px 20px;
}

.list {
    flex: 1;
    /* background-color: aqua; */
}

.fixed {
    position: fixed;
    top: 71px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.el-menu {
    display: flex;
    flex-wrap: wrap;
}

.el-menu-item {
    width: 100px;
    text-align: center !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.joined-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 230;
    box-sizing: border-box;
    border-right: 1px solid #e6e6e6;
}

.community-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    margin-bottom: 10px;
    display: inline-block;
    text-align: center;
    border: 1px solid #e6e6e6;
    font-size: 12px;

    &:hover {
        background-color: #e6e6e6
    }

}

.aside-item-label {
    font-weight: bold;
    color: rgb(51, 51, 51);
    padding: 15px 0px 10px 15px;
    border-right: solid 1px #e6e6e6;
}

.el-header {
    padding: 0;
}

.search-box {
    height: 100px;
    line-height: 100px;
    border-bottom: 1px solid #EBEEF5;
}

.search-warp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}
</style>